@import "../common.scss";

body {
	background-color: #fff;
}

.content {
	padding: ws(15);
	.header {
		text-align: center;
		color: #414141;
		font-size: ws(20);
		font-weight: normal;
		font-stretch: normal;
	}
	.price {
		text-align: center;
		margin-bottom: ws(30/2);
		font-size: ws(20);
		color: #df204d;
		line-height: ws(20);
	}
	.user{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: ws(10);
		.user-img{
			width: ws(68/2);
			height: ws(68/2);
			border-radius: 50%;
			object-fit: cover;
			margin-right: ws(10);
		}
		.user-desc{
			display: flex;
			flex-direction: column;
			.name{
				font-size: ws(14);
				color: #414141;
			}
			.time{
				font-size: ws(12);
				color: #b9b9b9;
			}
		}
	}
	.details{
		padding: ws(15);
		line-height: ws(38/2);
		font-size: ws(28/2);
		color: #414141;
	}
	.list-img{
		@include border-line(#e4e1e1, bottom);
		img{
			width: 100%;
			margin-bottom: ws(10);
		}
	}
	.preview{
		margin-top: ws(10);
		margin-bottom: ws(50);
		display: flex;
		justify-content: flex-end;
		font-size: ws(12);
		color: #7F7F7F;
	}
	.bottom-btn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: ws(50);
		background-color: #F2F2F2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: ws(30/2);
		.collect{
			margin-left: ws(15);
			display: flex;
			align-items: center;
			.collect-icon{
				width: ws(42/2);
				height: ws(42/2);
				margin-right: ws(5);
			}
		}
		.relation{
			background-color: #4fa8e9;
			width: ws(280/2);
			height: ws(50);
			line-height: ws(50);
			color: #fff;
			text-align: center;
		}
	}
}

.relation{
	.back{
		position: fixed;
		top: 0;
		left: ws(15);
		z-index: 10;
		.back-btn{
			margin-top: ws(10);
			width: ws(60);
			height: ws(30);
			border-radius: ws(40);
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-right: ws(10);
			box-shadow: 0 ws(2) ws(5)  rgba(#fff,.5);
		}
	}
	.title{
		font-size: ws(15);
		font-weight: bold;
		color: $main-color;
		margin-bottom: ws(10);
	}
	.img-wapper{
		position: relative;
		height: ws(350);
		background-color: #fff;
		.product{
			width: 100%;
			height: 100%;
			object-fit: cover;
			opacity: .7;
		}
		.cowry{
			padding: ws(10) ws(15);
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			background-color: rgba(#000,.3);
			.cowry-desc{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.name{
					color: #fff;
					font-size: ws(20);
				}
				.price {
					text-align: center;
					font-size: ws(20);
					color: red;
					line-height: ws(20);
				}
			}
		}
	}
	.user{
		padding: ws(15);
		.user-desc{
			display: flex;
			align-items: flex-start;
			.user-img{
				width: ws(60);
				height: ws(60);
				object-fit: cover;
				border-radius: ws(10);
			}
			.user-data{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: ws(15);
				.user-title{
					font-size: ws(18);
					color: #414141;
				}
			}
		}
	}
	
	.details{
		padding: ws(15);
		margin-top: ws(10);
		.txt{
			font-size: ws(14);
			color: #414141;
		}
	}
	.ipone{
		position: absolute;
		right: 10%;
		margin: auto;
		bottom: 5%;
		width: ws(130/2);
		height: ws(130/2);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 ws(2) ws(5)  rgba($main-color,.5);
		background-image: linear-gradient(-10deg, darken($main-color, 10%) 0%, lighten($main-color, 10%) 100%);
		> img {
			width: ws(30);
			height: ws(30);
		}
	}
		
}